<template>
  <div class="container">
    <main>
      <div class="search-box">
        <input type="text" v-model="cityQuery" placeholder="输入城市名称" @input="searchCities"
          @keyup.enter="selectCity(selectedCity)" />
        <button @click="selectCity(selectedCity)">查询</button>
      </div>
      <ul v-if="cityResults.length">
        <li v-for="city in cityResults" :key="city.id" @click="selectCity(city)">
          {{ `${city.country} ${city.adm1} ${city.name}` }}
        </li>
      </ul>

      <WeatherDisplay v-if="weatherData" :weather-data="weatherData" :loading="loading" :error="error" />
    </main>
  </div>
</template>

<script>
import { ref } from 'vue'
import WeatherDisplay from '../components/WeatherDisplay.vue'
import { GetWeather, SearchCities, GetWeather24Hour , GetWeather15Day} from '../../wailsjs/go/controller/WeatherService'

export default {
  components: {
    WeatherDisplay
  },
  setup() {
    const cityQuery = ref('西安')
    const cityResults = ref([])
    const selectedCity = ref(null)
    const weatherData = ref(null)
    const loading = ref(false)
    const error = ref(null)

    const searchCities = async () => {
      if (!cityQuery.value.trim()) return
      try {
        const response = await SearchCities(cityQuery.value)
        if (response && response.location) {
          cityResults.value = response.location
        } else {
          console.error('城市查询返回的数据格式不正确:', response)
        }
      } catch (err) {
        console.error('城市查询失败:', err)
      }
    }

    const selectCity = async (city) => {
      if (!city) return
      selectedCity.value = city
      cityQuery.value = city.name // 将选中的城市名称显示在输入框中
      cityResults.value = [] // 清空城市搜索结果列表
      await fetchWeather(city.id) // 使用城市 ID 查询天气
    }

    const fetchWeather = async (cityId) => {
      if (!cityId) return

      loading.value = true
      error.value = null

      try {
        const result = await GetWeather(cityId)
        const weatherData24h = await GetWeather24Hour(cityId)
        const weatherData15d = await GetWeather15Day(cityId)
        weatherData.value = {
          ...result,
          hourly: weatherData24h.hourly, // 合并数据
          daily: weatherData15d.daily
        };
      } catch (err) {
        error.value = err.message || '获取天气信息失败'
        weatherData.value = null
      } finally {
        loading.value = false
      }
    }


    // 初始化查询天气
    fetchWeather(selectedCity.value ? selectedCity.value.id : '101110101')
    return {
      cityQuery,
      cityResults,
      selectedCity,
      weatherData,
      loading,
      error,
      searchCities,
      selectCity,
      fetchWeather
    }
  }
}
</script>

<style>
.container {
  max-width: 8000px;
  margin: 0 auto;
  padding: 10px;
  font-family: Arial, sans-serif;
}

.search-box {
  display: flex;
  margin-bottom: 10px;
}

.search-box input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.search-box button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 16px;
}

.search-box button:hover {
  background-color: #2980b9;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

li:hover {
  background-color: #f0f0f0;
}
</style>
  